import React, { useState } from 'react';
import BasePage from './BasePage';
import { NavigationActions, NativeEventEmitter, NativeModules } from "react-native";
import Communication from '../Communication';
import Toast from 'react-native-root-toast';

import {
  StyleSheet,
  Text,
  TextInput,
  Button,
  View,
  BackHandler,
  Platform
} from 'react-native';

export default class BeautifulPage extends BasePage {
  _title = "第一个漂亮的页面"

  componentDidMount() {
    if (Platform.os == 'android') {
      const eventEmitter = new NativeEventEmitter(NativeModules.ToastExample);
      this.eventListener = eventEmitter.addListener('EventReminder', (event) => {
        console.log(event.eventProperty) // "someValue"
      });
    }
  }

  componentWillUnmount() {
    if (Platform.os == 'android') {
      this.eventListener.remove(); // 组件卸载时记得移除监听事件
    }
  }

  renderView() {
    return (
      <View style={{ margin: 10 }}>
        <Text style={styles.hello}>第一个页面,</Text>
        <Button
          color={'#000000'}
          style={{ fontSize: 24, color: 'green' }}
          containerStyle={{ padding: 10, height: 45, overflow: 'hidden', borderRadius: 4, backgroundColor: 'aqua' }}
          onPress={() => {
            //Toast.show(global.token)
            this.props.navigation.navigate('LoginPage')
          }}
          title="next page"
        />
      </View>
    );
  }

  onbackPress = () => {
    //this.props.navigation.goBack()
    //BackHandler.onbackPress
    BackHandler.exitApp()
    Communication.show('RN,我退出了', Communication.SHORT);
    console.log("============= exit ==============")
    //measureLayout()
    //this.mly()
    //jsPromiseCallback()
  }

  mly() {
    Communication.measureLayout(
      100,
      100,
      (msg) => {
        console.log(msg);
      },
      (x, y, width, height) => {
        console.log(x + ':' + y + ':' + width + ':' + height);
      }
    );
  }

  static cheader() {
    return (
      <View style={{ height: 50, backgroundColor: '#ff00ff' }}>
        <Text>我是header</Text>
      </View>

    );
  }
}

function measureLayout() {
  Communication.measureLayout(
    100,
    100,
    (msg) => {
      console.log(msg);
    },
    (x, y, width, height) => {
      console.log(x + ':' + y + ':' + width + ':' + height);
    }
  );
}

async function jsPromiseCallback() {
  try {
    const {
      relativeX,
      relativeY,
      width,
      height
    } = await Communication.jsPromiseCallback(100, 100);

    console.log(
      relativeX + ':' + relativeY + ':' + width + ':' + height
    );
  } catch (e) {
    console.error(e);
  }
}

var styles = StyleSheet.create(
  {
    hello: {
      fontSize: 20,
      textAlign: 'left',
      margin: 10
    }
  }
)